<template>
  <div class="container">
    <div class="main-content">
      <div style="text-align: end">
        <a-button type="primary" @click="openModal" style="background: rgba(29, 104, 208, 1)">
          <template #icon>
            <IconPlus />
          </template>
          新建
        </a-button>
      </div>
      <a-table :columns="columns" :data="data" row-key="id" style="margin-top: 10px" align="center" :pagination="false">
        <template #index="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
        <template #action="{ record }">
          <div class="btnBox">
            <!-- <div class="lookBtn">绑定</div>
            <div class="lookBtn">解绑</div> -->
            <a-button size="mini" type="text" @click="viewDetails(record)">
              <template #icon>
                <IconEdit />
              </template>
              修改
            </a-button>
            <a-button status="danger" size="mini" type="text" @click="deleteDetail(record)">
              <template #icon>
                <IconDelete />
              </template>
              删除
            </a-button>
            <a-button status="success" size="mini" type="text" @click="insertFromCopy(record)">
              <template #icon>
                <IconCopy />
              </template>
              复制
            </a-button>
          </div>
        </template>
      </a-table>
      <a-pagination
        class="mt-2 float-right"
        :total="pagination.total"
        :current="pagination.pageNum"
        :page-size="pagination.pageSize"
        @change="handlePageChange"
        @page-size-change="handlePageSizeChange"
        style="float: right; margin-right: 20px; margin-top: 20px; justify-content: end"
      ></a-pagination>
    </div>
    <a-modal
      v-model:visible="showModal"
      :title="modalTitle"
      @before-ok="handleSubmit"
      @cancel="handleCancel"
      class="modelCont"
      :width="860"
    >
      <a-form :model="form" :rules="rules" ref="formRef" class="formData">
        <a-row>
          <a-col :span="24">
            <a-form-item label="告警名称" field="name" required>
              <a-input v-model="form.name" placeholder="请输入告警名称" :disabled="!!form.id"> </a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="门限等级" field="monitorLevel" required>
              <a-radio-group v-model="form.monitorLevel">
                <a-radio :value="1">一级门限</a-radio>
                <a-radio :value="2">二级门限</a-radio>
                <a-radio :value="3">三级门限</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="门限警告值" class="levelStyle">
              <a-form-item label="上限" field="firstLevelMaxValue">
                <a-input-number v-model="form.firstLevelMaxValue" placeholder="请输入参数上限"> </a-input-number>
              </a-form-item>
              <a-form-item label="下限" field="firstLevelMinValue">
                <a-input-number v-model="form.firstLevelMinValue" placeholder="请输入参数下限"> </a-input-number>
              </a-form-item>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="判别模式选择" field="conditionSet" required>
              <a-select v-model="form.conditionSet" placeholder="请选择判别模式">
                <a-option :value="1">仅门限判别</a-option>
                <a-option :value="2">工作模式判别</a-option>
                <a-option :value="3">持续时间判别</a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="备注" field="remarks">
              <a-textarea v-model="form.remarks" placeholder="请输入算法描述" style="height: 120px"> </a-textarea>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { apiHome } from '@/api'
import { Message, Modal } from '@arco-design/web-vue'

const searchQuery = ref('')
const satelliteId = ref('')
const treeData = ref([
  {
    id: 1,
    name: '卫星A',
    children: [
      {
        id: 2,
        name: '子卫星A1'
      }
    ]
  },
  {
    id: 3,
    name: '卫星B'
  }
])
const filteredTreeData = ref(treeData.value)
const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0
})
const typeList = ref([])
const data = ref([])
const actRow = ref(null)
const rules = {
  name: [
    {
      required: true,
      message: '请输入告警名称'
    }
  ],
  monitorLevel: [
    {
      required: true,
      message: '请选择门限等级'
    }
  ],
  firstLevelMaxValue: [
    {
      required: true,
      message: '请输入门限上限'
    }
  ],
  firstLevelMinValue: [
    {
      required: true,
      message: '请输入门限下限'
    }
  ],
  conditionSet: [
    {
      required: true,
      message: '请选择判别模式'
    }
  ]
}
const MenuCount = [
  {
    title: '卫星',
    dataIndex: 'satelliteName',
    align: 'center'
  }
]

const columns = [
  {
    title: '序号',
    slotName: 'index',
    width: 60,
    customRender: ({ index }) => {
      return index + 1 + (pagination.value.pageNum - 1) * pagination.value.pageSize
    }
  },
  {
    title: '告警名称',
    dataIndex: 'name'
  },
  {
    title: '门限等级',
    dataIndex: 'monitorLevel',
    render: ({ record }) => {
      return record.monitorLevel === 1 ? '一级' : record.monitorLevel === 2 ? '二级' : '三级'
    }
  },
  {
    title: '门限警告值',
    children: [
      {
        title: '上限',
        dataIndex: 'firstLevelMaxValue'
      },
      {
        title: '下限',
        dataIndex: 'firstLevelMinValue'
      }
    ]
  },
  {
    title: '判别模式',
    dataIndex: 'conditionSet',
    render: ({ record }) => {
      return record.conditionSet === 1 ? '仅门限判断' : record.conditionSet === 2 ? '工作模式判单' : '持续时间判断'
    }
  },
  {
    title: '备注',
    dataIndex: 'remarks'
  },
  {
    title: '创建时间',
    dataIndex: 'createDate'
  },
  {
    title: '操作',
    slotName: 'action'
  }
]

const modalTitle = ref('新建多级门限警告值')
const showModal = ref(false)
const form = ref({
  id: '',
  monitorLevel: 1,
  conditionSet: '',
  firstLevelMinValue: 0,
  firstLevelMaxValue: 0,
  remarks: ''
})
const openModal = () => {
  form.value = {
    id: '',
    monitorLevel: 1,
    conditionSet: '',
    firstLevelMinValue: 0,
    firstLevelMaxValue: 0,
    remarks: ''
  }
  modalTitle.value = '新建多级门限警告值'
  showModal.value = true
}
const fetchPageList = () => {
  apiHome
    .getThresholdPageList({
      ...pagination.value
    })
    .then((res) => {
      console.log(res)
      data.value = res.data.list
      pagination.value.total = Number(res.data.total)
    })
}

const formRef = ref(null)
const handleCancel = () => {
  showModal.value = false
  formRef.value.resetFields()
}
const handleSubmit = (done) => {
  // console.log(JSON.parse(form.value.selectData));
  formRef.value.validate().then((col) => {
    if (!col) {
      if (form.value.firstLevelMaxValue < form.value.firstLevelMinValue) {
        Message.error('上限值不能小于下限值')
        done(false)
        return false
      }

      const apiMethod = form.value.id ? apiHome.updatethresholdSelectParams : apiHome.addThresholdParams
      apiMethod(form.value)
        .then((res) => {
          if (res.code === 200) {
            Message.success(form.value.id ? '修改成功' : '提交成功')
            showModal.value = false
            fetchPageList()
            done(true)
          } else {
            done()
          }
        })
        .finally(() => {
          done()
        })
    } else {
      done(false)
      return false
    }
  })
}

const deleteDetail = (record) => {
  Modal.confirm({
    title: '删除',
    content: '确定删除吗？',
    onOk: () => {
      apiHome.deleteThresholdOperatorMgr({ id: record.id }).then((res) => {
        if (+res.code === 200) {
          Message.success('删除成功')
          fetchPageList()
        } else if (+res.code === 2000) {
          Message.warning('参数已绑定算法，请先解绑所有算法')
        }
      })
    }
  })
}
const insertFromCopy = (record) => {
  Modal.confirm({
    title: '操作提示',
    content: '复制会插入一条相同的新数据，确定继续吗？',
    onOk: () => {
      const loading = Message.loading('复制中...')
      const apiMethod = apiHome.addThresholdParams
      apiMethod({
        ...record,
        id: ''
      })
        .then((res) => {
          if (res.code === 200) {
            Message.success('复制成功！')
            showModal.value = false
            fetchPageList()
          } else {
            Message.error('复制失败:' + res.message)
          }
        })
        .catch((err) => {
          Message.error('复制失败:' + err.message)
        })
        .finally(() => {
          loading.close()
        })
    }
  })
}

const viewDetails = async (record) => {
  modalTitle.value = '修改多级门限警告值'
  form.value = { ...record }
  form.value.firstLevelMaxValue = Number(form.value.firstLevelMaxValue)
  form.value.firstLevelMinValue = Number(form.value.firstLevelMinValue)
  showModal.value = true
}

const handlePageChange = (page) => {
  pagination.value.pageNum = page
  fetchPageList()
}

const handlePageSizeChange = (size) => {
  pagination.value.pageSize = size
  fetchPageList()
}

onMounted(() => {
  fetchPageList()
})
</script>

<style lang="less" scoped>
.btnBox {
  display: flex;

  div {
    margin-right: 10px;
    cursor: pointer;
  }
}

.lookBtn {
  color: #1d68d0;
}

.container {
  display: flex;
  min-height: calc(100vh - 56px);
}

.sidebar {
  width: 250px;
  padding: 20px;
  border-right: 1px solid #f0f0f0;
}

h2 {
  text-align: center;
  font-family:
    Microsoft YaHei,
    Microsoft YaHei,
    serif;
  font-weight: bold;
  font-size: 18px;
  color: #222222;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.settings {
  margin-bottom: 20px;
}

.analysis {
  flex: 1;
}

.my-tr {
  background: #1d68d0;
  color: #fff;

  :deep(td) {
    background: #1d68d0;
    color: #fff;
  }

  :deep(td:hover) {
    background: #1d68d0;
    color: #fff;
  }
}

.my-tr :hover {
  background: #1d68d0;
  color: #fff;
}

.my-table tr {
  cursor: pointer;
}

:deep(.levelStyle .arco-form-item) {
  margin-bottom: 0;
}
</style>
